{{ define "admin/users.html" }}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link href="../../../static/images/me.jpg" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../../static/css/me.css">
</head>

<body>

    <!--导航栏-->
    <nav class="ui inverted gird-header">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui olive header item" style="font-family: STSong">管理后台</h2>
                <a href="/blog/list" class=" m-item item m-mobile-hide"><i class="home icon"></i>文章管理</a>
                <a href="/type/list/0" class=" m-item item m-mobile-hide"><i class="clone outline icon"></i>分类管理</a>
                <a href="/link/list/0" class=" m-item item m-mobile-hide"><i class="pencil alternate icon"></i>友链管理</a>
                <a href="/picture/list/0" class=" m-item item m-mobile-hide"><i class="image icon"></i>相册管理</a>
                <a href="/user/list" class="active m-item item m-mobile-hide"><i class="image icon"></i>用户管理</a>
                <div class="right m-item m-mobile-hide menu">
                    <div class="ui dropdown  item">
                        <div class="text">
                            <img class="ui avatar image" src="../../../static/images/me.jpg">
                            <span>anoduo</span>
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="/" class="item">返回首页</a>
                            <a href="/logout" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <div class="m-padded-tb-hugex">
        <div class="ui attached pointing menu">
            <div class="ui container">
                <div class="right menu">
                    <a href="/user/list" class="teal active item">列表</a>
                </div>
            </div>
        </div>
    </div>

    <br>
    <br>
    <br>

    <!--中间内容-->
    <div class="">
        <div class="ui container">
            <div class="ui secondary segment form">
                <input type="hidden" name="page">
                <div class="inline fields">
                    <div class="field">
                        <input type="text" id="name" placeholder="用户名" value="{{.name}}">
                    </div>
                    <div class="field">
                        <button type="button" id="search-btn" class="ui mini teal basic button" onclick="search()"><i
                                class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>
            <div id="table-container">
                <table class="ui compact teal table">
                    <thead>
                        <tr align="center">
                            <th>ID</th>
                            <th>用户名</th>
                            <th>最近登录日期</th>
                            <th>创建日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    {{range .users}}
                    <tbody>
                        <tr align="center">
                            <td>{{.Id}}</td>
                            <td>{{.UserName}}</td>
                            <td>{{.RecentLogin}}</td>
                            <td>{{.CreateDate}}</td>
                            <td>2020-01-02 05:20</td>
                            <td>
                                <a href="/user/detail/{{.Id}}" class="ui mini teal basic button">详情</a>
                                <a href="/user/delete/{{.Id}}" class="ui mini red basic button"
                                    onclick="return confirm('确定要删除该用户吗？')">删除</a>
                            </td>
                        </tr>
                    </tbody>
                    {{end}}
                    <tfoot>
                        <tr>
                            <th colspan="7">
                                <div class="ui inverted divided stackable grid">
                                    <div class="three wide column" align="center">
                                        {{if ne .page 1}}
                                        <a class="item" href="/user/list?index={{.pre}}&name={{.name}}">上一页</a>
                                        {{end}}
                                    </div>

                                    <div class="ten wide column" align="center">
                                        <p>第 <span>{{.page}}</span> 页，共 <span>{{.total}}</span> 页，有
                                            <span>{{.count}}</span> 个用户
                                        </p>
                                    </div>

                                    <div class="three wide column" align="center">
                                        {{if ne .page .total}}
                                        <a class="item" href="/user/list?index={{.page}}&name={{.name}}">下一页</a>
                                        {{end}}
                                    </div>
                                </div>
                            </th>
                        </tr>
                    </tfoot>
                </table>

                {{if not .error}}
                <div class="ui success message">
                    <i class="close icon"></i>
                    <div class="">提示：操作成功！</div>
                </div>
                {{end}}

                <!-- 查询失败的提示信息 -->
                {{if .error}}
                <div class="ui error message">
                    <div class="header">
                        {{.error}}
                    </div>
                    <p>请重试！</p>
                </div>
                {{end}}

            </div>

        </div>
    </div>


    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <!--底部栏-->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-opacity">
        <!--容器-->
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="four wide column">
                    <div style="font-size: large;font-weight: bold"
                        class="ui inverted m-text-thin m-text-spaced m-margin-top-max">联系我</div>
                    <div class="ui inverted link list">
                        <div href="#" class="m-text-thin">Email：767440849@qq.com</div>
                        <div href="#" class="m-text-thin">QQ：767440849</div>
                    </div>
                </div>

                <div class="four wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <!--微信二维码-->
                            <div style="font-size: large;font-weight: bold"
                                class="ui inverted m-text-thin m-text-spaced ">关注公众号</div>
                            <img src="../../../static/images/oneStar.jpg" class="ui m-margin-top rounded image" alt=""
                                style="width: 110px">
                        </div>
                    </div>
                </div>

                <div class="four wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <!--微信二维码-->
                            <div style="font-size: large;font-weight: bold"
                                class="ui inverted m-text-thin m-text-spaced ">问题交流（QQ群）
                            </div>
                            <img src="../../../static/images/QQ-question.jpg" class="ui m-margin-top rounded image"
                                alt="" style="width: 110px">
                        </div>
                    </div>
                </div>
                <!--博客运行时间统计-->
                <div class="four wide column">
                    <div style="font-size: large;font-weight: bold"
                        class="ui inverted  m-text-thin m-text-spaced m-margin-top">
                        客栈信息</div>
                    <div id="blog-message">
                        <div class="ui inverted link list" style="align-content: center;margin-top: 10px">
                            <div class="m-text-thin" style="text-align: left;margin-left: 75px;">
                                文章总数： <h2 class="ui orange header m-inline-block m-margin-top-null"
                                    style="font-size:medium;" id="blog_count"> 0 </h2> 篇
                            </div>
                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">
                                访问总数： <h2 class="ui orange header m-inline-block m-margin-top-null"
                                    style="font-size:medium;" id="view_count"> 0 </h2> 次
                            </div>
                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">
                                评论总数： <h2 class="ui orange header m-inline-block m-margin-top-null"
                                    style="font-size:medium;" id="comment_count"> 0 </h2> 条
                            </div>
                            <div class="m-text-thin" style="text-align: left;margin-left: 75px">
                                留言总数： <h2 class="ui orange header m-inline-block m-margin-top-null"
                                    style="font-size:medium;" id="message_count"> 0 </h2> 条
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">我的客栈已营业：<span
                    id="htmer_time" class="item m-text-thin"></span> (*๓´╰╯`๓)</div>
        </div>
        </div>

    </footer>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script src="../../../static/js/info.js"></script>
    <script src="../../../static/js/footer.js"></script>
    <script src="../../../static/js/admin/user.js"></script>
</body>

</html>
{{end}}